<style scoped>
@import url(./home.scss);
</style>

<template>
  <div class="bigbox">
    <div class="topheader">
      <div class="topleft">
        <div class="topimg">
          <img src="../assets/image.png">
        </div>
        <span class="kefu">客服工作台</span>
        <div class="topimg2"></div>
        <span class="dianpu">已失效店铺：12</span>
        <div class="topimg3"></div>
      </div>
      <div class="topright">
        <div class="wenhao"></div>
        <div class="suoxiao"></div>
        <div class="fangda "></div>
        <div class="guangbi"></div>
      </div>
    </div>
    <div class="bigbox-2">
      <div class="leftbox">
        <div class="rect">
          <div class="huihua">
            <img src="../assets/会话窗口.png">
            <span class="fl">会话</span>
          </div>
          <div class="ai">
            <img src="../assets/">
            <span class="fl">AI客服</span>
          </div>
          <div class="gongdan">
            <img src="../assets/">
            <span class="fl">工单</span>
          </div>
          <div class="shouhou">
            <img src="../assets/">
            <span class="fl">售后</span>
          </div>
          <div class="jixiao">
            <img src="../assets/">
            <span class="fl">绩效</span>
          </div>
          <div class="wuliu">
            <img src="../assets/物流工单.png">
            <span class="fl">物流工单</span>
          </div>
        </div>

      </div>
      <div class="sp">
        <input type="text" placeholder="搜索店铺" />
        <div class="kexuan">

          <span>一键重连</span>
          <span>导入店铺</span>
          <span>刷新</span>
        </div>
        <span class="lxdp">离线店铺（2）</span>
        <div class="lixian">
          <div class="baihuo">
            <span class="youdian">有点喜欢小百货</span>
            <span class="chonglian">重连</span>
            <div class="wenzi">
              <span>三分钟回复率</span>
              <span class="jian">-</span>
              <span>今日咨询人数</span>
              <span class="jian">-</span>
            </div>
          </div>
          <div class="baihuo">
            <span class="youdian">有点喜欢小百货</span>
            <span class="chonglian">重连</span>
            <div class="wenzi">
              <span>三分钟回复率</span>
              <span class="jian">-</span>
              <span>今日咨询人数</span>
              <span class="jian">-</span>
            </div>
          </div>
        </div>

        <span class="zxdp">在线店铺（2）</span>
        <div class="zaixian">
          <div class="baihuo">
            <span class="youdian">有点喜欢小百货</span>
            <div class="yuandian"></div>
            <div class="wenzi">
              <span>三分钟回复率</span>
              <span class="jian">78%</span>
              <span class="houtai">后台</span>
              <span>今日咨询人数</span>
              <span class="jian">78%</span>
              <span class="yichu">移除</span>
            </div>
          </div>
          <div class="baihuo">
            <span class="youdian">有点喜欢小百货</span>
            <div class="yuandian"></div>
            <div class="wenzi">
              <span>三分钟回复率</span>
              <span class="jian">78%</span>
              <span class="houtai">后台</span>
              <span>今日咨询人数</span>
              <span class="jian">78%</span>
              <span class="yichu">移除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="centerbox">
        <div class="c-header">
          <a href="#" class="yanse fl">
            <span class="active">今日接待</span>
          </a>
          <a href="#" class="fl">
            <span>已回复</span>
          </a>
          <a href="#" class="fl">
            <span>收藏会话</span>
          </a>
          <a href="#" class="fl">
            <span>批量回复</span>
          </a>
          <div class="c-right fr">
            <a class="fl">
              <img src="../assets/icon添加／新增.png">
            </a>
            <span class="fr">添加会话</span>
          </div>
        </div>
        <div class="guolu">
          <span class="gldp fl">过滤店铺：有点喜欢小百货</span>
          <span class="fr">取消过滤</span>
        </div>
        <div class="zidong">
          <div class="z-header">
            <span class="fl">已被自动回复（1）</span>
            <span class="rengong fr">不计入回复率，需人工回复</span>
          </div>
          <div class="dianpu">
            <div class="avatar-wrapper fl">
              <img src="../assets/default-avatar.png" class="shop-avatar">
            </div>
            <div class="dp-text fl">
              <div class="dp-top">
                <span>X****u</span>
                <span class="username">@春暖花开为你而来</span>
                <span class="xiadan">下单数(12)</span>
                <span>昨天17:06</span>
              </div>
              <div class="dp-b">
                <span class="jiqiren">机器人</span>
                <span>在不!123123123123123123...</span>
              </div>
            </div>
          </div>
        </div>
        <div class="yihui">
          <div class="z-header">
            <span class="fl">待回复（7）</span>
          </div>
          <div class="dianpu-2">
            <div class="avatar-wrapper fl">
              <img src="../assets/default-avatar.png" class="shop-avatar">
            </div>
            <div class="dp-text fl">
              <div class="dp-top">
                <span>ぃ******、</span>
                <span class="username">@春暖花开为你而来</span>
                <span class="xiadan">下单数(2)</span>
                <span class="shijian">昨天17:06</span>
              </div>
              <div class="dp-b">
                <span>在不!123123123123123123...</span>
              </div>
            </div>
          </div>
        </div>
        <div class="origin">
          <div class="dianpu-2">
            <div class="avatar-wrapper fl">
              <img src="../assets/default-avatar.png" class="shop-avatar">
            </div>
            <div class="dp-text fl">
              <div class="dp-top">
                <div class="left">
                  <span>ぃ******、</span>
                  <span class="username">@春暖花开为你而来</span>
                </div>
                <div class="right">
                  <span class="shijian">昨天17:06</span>
                </div>
              </div>
              <div class="dp-b">
                <span>在不!123123123123123123...</span>
                <a href="#">
                  <img src="../assets/收藏／黄(1).png">
                </a>
              </div>
            </div>
          </div>

          <div class="dianpu-2">
            <div class="avatar-wrapper fl">
              <img src="../assets/default-avatar.png" class="shop-avatar">
            </div>
            <div class="dp-text fl">
              <div class="dp-top">
                <div class="left">
                  <span>ぃ******、</span>
                  <span class="username">@春暖花开为你而来</span>
                </div>
                <div class="right">
                  <span class="shijian">昨天17:06</span>
                </div>
              </div>
              <div class="dp-b">
                <span>在不!123123123123123123...</span>
                <a href="#">
                  <img src="../assets/收藏／黄(1).png">
                </a>
              </div>
            </div>
          </div>

          <div class="dianpu-2">
            <div class="avatar-wrapper fl">
              <img src="../assets/default-avatar.png" class="shop-avatar">
            </div>
            <div class="dp-text fl">
              <div class="dp-top">
                <div class="left">
                  <span>ぃ******、</span>
                  <span class="username">@春暖花开为你而来</span>
                </div>
                <div class="right">
                  <span class="shijian">昨天17:06</span>
                </div>
              </div>
              <div class="dp-b">
                <span>在不!123123123123123123...</span>
                <a href="#">
                  <img src="../assets/收藏／黄(1).png">
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="dianpu-3">
          <div class="avatar-wrapper fl">
            <img src="../assets/default-avatar.png" class="shop-avatar">
          </div>
          <div class="dp-text fl">
            <div class="dp-top">
              <div class="left">
                <span>ぃ******、</span>
                <span class="username">@春暖花开为你而来</span>
              </div>
              <div class="right">
                <span class="shijian">昨天17:06</span>
              </div>
            </div>
            <div class="dp-b">
              <span>在不!123123123123123123...</span>
              <a href="#">
                <img src="../assets/收藏／黄(1).png">
              </a>
            </div>
          </div>
        </div>
        <div class="chaoshi">
          <div class="z-header">
            <span class="fl">已超时（1）</span>
          </div>
          <div class="dianpu-2">
            <div class="avatar-wrapper fl">
              <img src="../assets/default-avatar.png" class="shop-avatar">
            </div>
            <div class="dp-text fl">
              <div class="dp-top">
                <div class="left">
                  <span>ぃ******、</span>
                  <span class="username">@春暖花开为你而来</span>
                  <span class="xiadan">下单数(2)</span>
                </div>
                <div class="right">
                  <span class="shijian">昨天17:06</span>
                </div>
              </div>
              <div class="dp-b">
                <span>在不!123123123123123123...</span>
                <span>已超时3小时</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bigbox-3">
        <div class="big3-header">
          <span class="anquan">我是王安全</span>
          <img src="../assets/">
          <span class="pdd">拼多多</span>
          <span class="username">@有点喜欢小百货</span>
          <span class="xiadan">下单数(2)</span>
          <div class="bg3-r">
            <div class="zhuangyi">
              <img src="../assets/转移会话.png" style="margin-right: 4px;">
              <span>转移会话</span>
            </div>
            <img src="../assets/收藏／黄(1).png" class="shoucang">
          </div>
        </div>
        <div class="neirong">
          <div class="item right">
            <div class="txt-box">
              <div class="name">2024/10/25 20:23:14 欢乐无忧百货</div>
              <div class="content">1231231231231231231231231254</div>
              <span class="yidu">已读</span>
            </div>
            <div class="txt-img"></div>
          </div>
          <div class="item">
            <div class="txt-img"></div>
            <div class="txt-box">
              <div class="name">游客 2024/10/25 20:23:14</div>
              <div class="content">
                <div class="tc-h">商品ID：572305081311</div>
                <div class="tc-b">
                  <img>
                  <div class="tcb">
                    <span class="shopname">2023秋冬季韩系ins贝雷帽女显脸小日系复古百搭毛呢画家帽子保暖</span>
                    <div class="tcb-b">
                      <span>￥29.76</span>
                      <span>/2人团</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="shuru">
            <div class="shu-t">
              <div class="shu-img">
                <img src="../assets/表情.png">
                <img src="../assets/图片.png">
                <img src="../assets/视频.png">
                <img src="../assets/文件.png">
                <img src="../assets/优惠券.png">
                <img src="../assets/售后.png">
                <img src="../assets/链接.png">
              </div>
              <div class="shu-a">
                <a>
                  <span>邀请下单</span>
                </a>
                <a>
                  <span>小额打款</span>
                </a>
                <a>
                  <span>小额收款</span>
                </a>
                <a>
                  <span>邀请开票</span>
                </a>
              </div>
            </div>
            <textarea class="input-box" placeholder="在此处输入消息内容，按回车键以发送消息，按Ctrl+Enter键换行"></textarea>

            <!-- 发送按钮 -->
            <button class="send-btn">发送</button>
          </div>
        </div>
      </div>
      <div class="bigbox-4">
        <div class="bg4-h">
          <div class="search-container">
            <select class="mc">
              <option>商品名称</option>
            </select>
            <input type="text" placeholder="请输入商品名称">
            <button class="search-btn">
              <img src="../assets/搜索.png" alt="搜索">
            </button>
          </div>
          <div class="yuan">
            <a href="#">
              <span>全部商品</span>
            </a>
            <a href="#">
              <span>浏览足迹</span>
            </a>
            <a href="#">
              <span>热销</span>
            </a>
            <a href="#">
              <span>猜TA喜欢</span>
            </a>
          </div>
        </div>
        <div class="shopbig">
          <div class="shopping">
            <div class="shop">
              <img src="../assets/">
              <div class="shopname">
                <span class="shop-2">2023秋冬季韩系ins贝雷帽女显脸小日系复古百搭毛呢画家帽子保暖</span>
                <span>￥9.9-19.9</span>
              </div>
            </div>
            <div class="xiaoshou">
              <span>库存：6810</span>
              <span>销量：60</span>
              <span>待成团：0</span>
            </div>
            <div class="anniu">
              <button>发送商品</button>
              <button>邀请下单</button>
              <button>SKU/属性</button>
            </div>
          </div>

          <div class="shopping">
            <div class="shop">
              <img src="../assets/">
              <div class="shopname">
                <span class="shop-2">2023秋冬季韩系ins贝雷帽女显脸小日系复古百搭毛呢画家帽子保暖</span>
                <span>￥9.9-19.9</span>
              </div>
            </div>
            <div class="xiaoshou">
              <span>库存：6810</span>
              <span>销量：60</span>
              <span>待成团：0</span>
            </div>
            <div class="anniu">
              <button>发送商品</button>
              <button>邀请下单</button>
              <button>SKU/属性</button>
            </div>
          </div>

          <div class="shopping">
            <div class="shop">
              <img src="../assets/">
              <div class="shopname">
                <span class="shop-2">2023秋冬季韩系ins贝雷帽女显脸小日系复古百搭毛呢画家帽子保暖</span>
                <span>￥9.9-19.9</span>
              </div>
            </div>
            <div class="xiaoshou">
              <span>库存：6810</span>
              <span>销量：60</span>
              <span>待成团：0</span>
            </div>
            <div class="anniu">
              <button>发送商品</button>
              <button>邀请下单</button>
              <button>SKU/属性</button>
            </div>
          </div>

          <div class="shopping">
            <div class="shop">
              <img src="../assets/">
              <div class="shopname">
                <span class="shop-2">2023秋冬季韩系ins贝雷帽女显脸小日系复古百搭毛呢画家帽子保暖</span>
                <span>￥9.9-19.9</span>
              </div>
            </div>
            <div class="xiaoshou">
              <span>库存：6810</span>
              <span>销量：60</span>
              <span>待成团：0</span>
            </div>
            <div class="anniu">
              <button>发送商品</button>
              <button>邀请下单</button>
              <button>SKU/属性</button>
            </div>
          </div>
        </div>
        <div class="yeshu">
          <div class="left">
            <div class="jilu">共 400 条记录</div>
          </div>
          <div class="right">
            <div class="pagination">
              <a href="#">&laquo;</a>
              <a href="#" class="active">1</a>
              <a href="#">2</a>
              <a href="#">3</a>
              <a href="#">&raquo;</a>
            </div>
          </div>
        </div>
      </div>
      <div class="bigbox-5">
        <div class="huihua">
          <img src="../assets/用户信息默认.png">
          <span class="fl">用户信息</span>
        </div>
        <div class="ai">
          <img src="../assets/访客信息默认.png">
          <span class="fl">访客信息</span>
        </div>
        <div class="gongdan">
          <img src="../assets/商品推荐选中.png">
          <span class="sptuijian fl">商品推荐</span>
        </div>
        <div class="shouhou">
          <img src="../assets/店铺订单默认.png">
          <span class="fl">店铺订单</span>
        </div>
        <div class="jixiao">
          <img src="../assets/智能辅助默认.png">
          <span class="fl">智能辅助</span>
        </div>
        <div class="jixiao">
          <img src="../assets/图片列表默认.png">
          <span class="fl">图片列表</span>
        </div>
        <div class="wuliu">
          <img src="../assets/知识库默认默认.png">
          <span class="fl">知识库</span>
        </div>
      </div>
    </div>

  </div>
</template>
